<template>
  <div>
    {{ count }}
  </div>
  没有传参，事件对象会作为额外的参数，自动传递到函数
  <button v-on:click="add">+1</button>
  <div>
    事件处理写在内联里面
    <button @click="count--">@click="count--"</button>
  </div>

  <div>
    如果有传参：这种情况下需要使用一个特殊的变量 $event
    <button @click="handleHello('Hello world', $event)">传递Hello world</button>
  </div>
  <div>
    如果是箭头函数，那么事件对象需要作为参数传入
    但是参数的就没有必须要$event
    <button v-on:click="(e) => add(e)">箭头函数调用add()</button>
    <button @click="(e) => handleHello('Hello world', e)">箭头函数调用handleHello()</button>
  </div>
  <hr>

  <h2>修饰符</h2>
  <div>.stop：阻止事件冒泡</div>
  <div class="container" @click="console.log('父元素被点击了')">
    <div class="item1" @click.once.stop="console.log('子元素被点击了')"></div>
    <div class="item2" @click.capture.stop.prevent.once="console.log('子元素被点击了')"></div>
  </div>

  <div>按键修饰符</div>
  <input type="text" @keyup.enter="submitText">
  <input type="text" @keyup.enter.alt="submitText">


  <div>鼠标按键修饰符</div>
  <button class="context-menu-button" @contextmenu.prevent.right="handleRightClick">
    右键点击
  </button>
</template>

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  function add(event) {
    count.value++
    console.log("事件对象", event);
    console.log("目标对象", event.target);
    console.log("鼠标的参数", event.clientX, event.clientY);
  }

  function handleHello(message, $event) {
    console.log(message, $event);
  }

  function submitText(e) {
    console.log('我按下了enter键');
  }

  function handleRightClick() {
    console.log('你点击了鼠标右键')
  }

</script>

<style lang="scss" scoped>
  .container {
    width: 400px;
    height: 300px;
    background-color: rgba($color: #9c9520, $alpha: 1.0);
  }

  .item1 {
    width: 200px;
    height: 100px;
    background: #12227e;
  }

  .item2 {
    width: 200px;
    height: 100px;
    background: #18951e;
  }

  .context-menu-button {
    padding: 10px 20px;
    cursor: context-menu;
    /* 显示适当的鼠标指针 */
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>
